<template>
  <view class="audit-container">
    <!-- 基本信息部分 -->
    <view class="section">
      <view class="section-title">
        <view class="section-line"></view>
        <text>基本信息</text>
      </view>
      <view class="form-group">
        <view class="form-item">
          <text class="label required">店铺名</text>
          <text class="value">{{ storeInfo.name }}</text>
        </view>
        <view class="form-item">
          <text class="label">店长名</text>
          <text class="value">{{ storeInfo.store_manager_name }}</text>
        </view>
        <view class="form-item">
          <text class="label">邮件地址</text>
          <text class="value">{{ storeInfo.email_address }} </text>
        </view>
        <view class="form-item">
          <text class="label required">联系电话</text>
          <text class="value">{{ storeInfo.mobile }}</text>
        </view>
        <view class="form-item">
          <text class="label required">所属地区</text>
          <text class="value"
            >{{ storeInfo.province }} {{ storeInfo.city }} {{ storeInfo.area }}
          </text>
        </view>
        <view class="form-item">
          <text class="label required">店铺地址</text>
          <text class="value">{{ storeInfo.address }} </text>
        </view>
      </view>
    </view>

    <!-- 上传证件部分 -->
    <view class="section">
      <view class="section-title">
        <view class="section-line"></view>
        <text>上传证件</text>
      </view>
      <view class="form-group">
        <view class="form-item">
          <text class="label required">营业执照/店铺照片</text>
          <view class="image-preview">
            <image
              class="preview-img"
              :src="storeInfo.business_license"
              mode="fill"
            ></image>
          </view>
        </view>
        <view class="form-item">
          <text class="label">店铺logo</text>
          <view class="image-preview">
            <image
              class="preview-img"
              :src="storeInfo.logo"
              mode="fill"
            ></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 审核结果部分 -->
    <view class="section" v-if="action === 'audit'">
      <view class="section-title">
        <view class="section-line"></view>
        <text>审核结果</text>
      </view>
      <view class="form-group">
        <view class="form-item">
          <text class="label">审核备注：</text>
          <input
            v-model="auditObj.audit_remarks"
            class="input-field"
            type="text"
            placeholder="请输入审核备注"
          />
        </view>
        <view class="form-item">
          <text class="label required">业务员：</text>
          <selectSalesMan
            style="width: 100%"
            v-model="auditObj.sales_person_id"
            label="指定业务员"
            :options="supplierOptions"
            placeholder="请选择业务员"
            :title="`请选择业务员`"
          />
        </view>
        <MultiSelect
            label="授权品牌"
            placeholder="请选择授权的品牌"
            :options="brandOptions"
            v-model="auditObj.brand_ids"
          />
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="footer" v-if="action === 'audit'">
      <button class="btn btn-reject" @click="auditStore(3)">审核不通过</button>
      <button class="btn btn-approve" @click="auditStore(2)">审核通过</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getStoreInfo, saveAudit } from "@/api/store";
import { getSupplierBrandList, getSupplierSalesmanList } from "@/api/supplier";
import MultiSelect from "../../component/selectMore/selectmore.vue";
import selectSalesMan from "@/component/goods/selectSupplier.vue";
import { showToast } from "@/utils/helper";
// 这里可以添加业务逻辑
const action = ref(null);
const getStoreInfoData = async () => {
  const res = await getStoreInfo({ id: auditObj.value.id });
  console.log(res);
  storeInfo.value = res;
};

const auditObj = ref({
  id: null,
  audit_status: 0,
  audit_remarks: "",
  brand_ids: [],
  sales_person_id: undefined,
  sales_person_name: "",
});
const storeInfo = ref({});

// 品牌选项数据
const brandOptions = ref([]);
const getBrandListData = async () => {
  const res = await getSupplierBrandList();
  brandOptions.value = res.map((i) => ({ id: i.id, name: i.name }));
};

const supplierOptions = ref([]);
const getSalesManListData = async () => {
  const res = await getSupplierSalesmanList({
    page: 1,
    limit: 999,
  });
  supplierOptions.value = res.data.map((i) => ({ id: i.id, name: i.name }));
};
const auditStore = async (status) => {
  if(!auditObj.value.sales_person_id) return showToast("请选择业务员");
  auditObj.value.audit_status = status;
  await saveAudit({
    ...auditObj.value,
    supplier_shop_id: auditObj.value.id,
    sales_person_name:
      supplierOptions.value.find((i) => i.id == auditObj.value.sales_person_id)
        ?.name || "",
  });
  showToast("审核成功");
  uni.navigateBack();
};
onLoad(async (options) => {
  auditObj.value.id = options.id;
  action.value = options.action;
  await getStoreInfoData();
  await getBrandListData();
  await getSalesManListData();
});
</script>

<style scoped>
.audit-container {
  background-color: #fff;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.section {
  margin-bottom: 20rpx;
}

.section-title {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.section-line {
  width: 6rpx;
  height: 30rpx;
  background-color: #1989fa;
  margin-right: 10rpx;
}

.form-group {
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.required::before {
  content: "*";
  color: #ff4d4f;
  margin-right: 4rpx;
}

.value {
  font-size: 28rpx;
  color: #333;
}

.image-preview {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.preview-img {
  width: 200rpx;
  height: 160rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.input-field {
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.brand-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  padding: 0 20rpx;
}

.brand-text {
  font-size: 28rpx;
  color: #999;
}

.brand-arrow {
  font-size: 28rpx;
  color: #999;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 100rpx;
}

.btn {
  flex: 1;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  border-radius: 0;
  border: none;
}

.btn-reject {
  background-color: #ff4d4f;
}

.btn-approve {
  background-color: #1989fa;
}
</style>
